<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>

		<link rel="stylesheet" type="text/css" href="css/registLogin/util.css">
		<link rel="stylesheet" type="text/css" href="css/registLogin/main.css">

		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>

		<style>
			.p-t-85 {
				padding-top: 10px;
			}
			
			.p-b-70 {
				padding-bottom: 35px;
			}
			
			.m-t-85 {
				margin-top: 15px;
			}
			
			.container-login100 {
				/* padding: 25px; */
				margin: 0;
				padding: 0;
			}
			/*toast信息提示*/
			
			.mui-toast-container {
				bottom: 50% !important;
			}
			.mui-toast-message {
				opacity: 0.6;
				color: #fff;
				width: 180px;
				padding: 70px 5px 10px 5px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
				font-size: 19px;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
				height:  200px;
				z-index: 100;
			}
			a{
				color: #007aff;
				text-decoration:none;
			}
		</style>
	</head>

	<body>

		<div class="mui-content">
			<div class="container-login100">
				<div class="wrap-login100 p-t-85 p-b-20">
					<form id="userform">
						<span class="login100-form-title p-b-70">
							<h5>Runface login</h5>
						</span>
						<span class="login100-form-avatar">
							<img id="img_login_face" src="css/registLogin/touxiang.jpg" alt="logo">
						</span>

						<div class="wrap-input100 validate-input m-t-85 m-b-35">
							<input class="input100" type="text" id="username" name="username" placeholder="用户名">
							<span class="focus-input100"></span>
						</div>

						<div class="wrap-input100 validate-input m-b-50" >
							<input class="input100" type="password" id="txt_password" name="password" placeholder="密码">
							<span class="focus-input100"></span>
						</div>
						<!-- 测试 -->
<!-- 						<div class="wrap-input100 validate-input m-b-50" style="z-index: 300000;">
							<input class="input100" type="button" id="txt_button" name="loginbtn" value="login">
							<span class="focus-input100"></span>
						</div> -->
						<div class="container-login100-form-btn" style="z-index: 300000;">
							<button type="submit" id="registOrLogin" class="login100-form-btn">
								登录
							</button>
						</div>
					</form>
					
					<div class="mui-content-padded">
						<div class="link-area"><a id='reg' href="reg.html">注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
						</div>
					</div>
					<!-- <div class="mui-content-padded oauth-area">
					
					</div> -->
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/app.js" ></script>
		<script type="text/javascript">
			
			mui.plusReady(function() {
				// 设置系统状态栏背景
				plus.navigator.setStatusBarBackground("#FFFFF");
				// 设置系统状态栏样式为浅色文字
				// plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
				var wvs=plus.webview.getDisplayWebview();
				for(var i=0;i<wvs.length;i++){
					console.log('Display webview '+i+': '+wvs[i].getURL());
				}
				
				document.getElementById("registOrLogin").addEventListener('tap', function() {
					console.log("点击了登录按钮");
				});
				
				console.log("剩余窗口数量："+plus.webview.getTopWebview().id);
				// 判断用户是否注册登录过，如果本地内存有全局的用户对象，此时直接跳转到首页
				var userInfo = app.getUserGlobalInfo();
				if (userInfo != null &&userInfo.username!=null) {
					// 页面跳转
					mui.openWindow("index.html", "index.html");
				}
				
				var userform = document.getElementById("userform");
				var username = document.getElementById("username");
				var txt_password = document.getElementById("txt_password");
				
				userform.addEventListener("submit", function(e){
					console.log("login.html====执行了submit监听器");
					// 判断用户名是否为空，如果为空则让其获得焦点
					if (!app.isNotNull(username.value)) {
						// 获取焦点
						username.focus();
					} else if (!app.isNotNull(txt_password.value)) {
						// 获取焦点
						txt_password.focus();
					} else {
						// 判断用户名和密码的长度，进行限制
						if (username.value.length > 12) {
							app.showToast("用户名不能超过12", "error");
							return false;
						} else if (txt_password.value.length > 12) {
							app.showToast("密码不能超过12", "error");
							return false;
						}
						
						// 获取每台手机的唯一cid
						var cid = plus.push.getClientInfo().clientid;
						// 与后端联调
						mui.ajax(app.serverUrl + "/user/login.action",{
							data:{
								username:username.value,
								password:txt_password.value,
								cid: cid
							},
							dataType:'json',//服务器返回json格式数据
							type:'post',//HTTP请求类型
							timeout:10000,//超时时间设置为10秒；
							headers:{'Content-Type':'application/json'},	              
							success:function(data){
								//服务器返回响应，根据响应结果，分析是否登录成功；
								console.log("服务器响应结果：=="+JSON.stringify(data));
								
								username.blur();
								txt_password.blur();
								
								// if (data.status == 200) {
								if (data.code == 0) {
									// console.log("执行到这里了");
									// 登录或者注册成功之后，保存全局用户对象到本地缓存
									var userInfoJson = data.data;
									// console.log('data.data=========='+JSON.stringify(userInfoJson));
									app.setUserGlobalInfo(userInfoJson);
									
									// 页面跳转
									// mui.openWindow("index.html", "index.html");
									var curwv = plus.webview.currentWebview().close();
								} else {
									app.showToast(data.msg, "error");
								}
							}
						});
						
					}
					
					
					// 阻止默认时间，阻止默认表单提交
					e.preventDefault();
				});
				
				var settings = app.getSettings();
				var state = app.getState();
				
				var mainPage = plus.webview.getWebviewById("index");
				var main_loaded_flag = false;
				// 预加载main.html页面
				if(!mainPage){
					mainPage = mui.preload({
						"id": 'index',
						"url": 'index.html'
					});
				}else{
					main_loaded_flag = true;
				}
				
				mainPage.addEventListener("loaded",function () {
					main_loaded_flag = true;
				});
				
				var toMain = function() {
					//使用定时器的原因：
					//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
					var id = setInterval(function () {
						if(main_loaded_flag){
							clearInterval(id);
							mui.fire(mainPage, 'show', null);
							mainPage.show("pop-in");
						}
					},20);
				};
				
				//检查 "登录状态/锁屏状态" 开始
				if (settings.autoLogin && state.token && settings.gestures) {
					mui.openWindow({
						url: 'unlock.html',
						id: 'unlock',
						show: {
							aniShow: 'pop-in'
						},
						waiting: {
							autoShow: false
						}
					});
				} else if (settings.autoLogin && state.token) {
					toMain();
				} else {
					app.setState(null);
					//第三方登录
					var authBtns = ['qihoo', 'weixin', 'sinaweibo', 'qq']; //配置业务支持的第三方登录
					var auths = {};
					var oauthArea = document.querySelector('.oauth-area');
					plus.oauth.getServices(function(services) {
						for (var i in services) {
							var service = services[i];
							auths[service.id] = service;
							if (~authBtns.indexOf(service.id)) {
								var isInstalled = app.isInstalled(service.id);
								var btn = document.createElement('div');
								//如果微信未安装，则为不启用状态
								btn.setAttribute('class', 'oauth-btn' + (!isInstalled && service.id === 'weixin' ? (' disabled') : ''));
								btn.authId = service.id;
								btn.style.backgroundImage = 'url("images/' + service.id + '.png")'
								oauthArea.appendChild(btn);
							}
						}
						mui(oauthArea).on('tap', '.oauth-btn', function() {
							if (this.classList.contains('disabled')) {
								plus.nativeUI.toast('您尚未安装微信客户端');
								return;
							}
							var auth = auths[this.authId];
							var waiting = plus.nativeUI.showWaiting();
							auth.login(function() {
								waiting.close();
								plus.nativeUI.toast("登录认证成功");
								auth.getUserInfo(function() {
									plus.nativeUI.toast("获取用户信息成功");
									var name = auth.userInfo.nickname || auth.userInfo.name;
									app.createState(name, function() {
										toMain();
									});
								}, function(e) {
									plus.nativeUI.toast("获取用户信息失败：" + e.message);
								});
							}, function(e) {
								waiting.close();
								plus.nativeUI.toast("登录认证失败：" + e.message);
							});
						});
					}, function(e) {
						oauthArea.style.display = 'none';
						plus.nativeUI.toast("获取登录认证失败：" + e.message);
					});
				}
				// close splash
				setTimeout(function() {
					//关闭 splash
					plus.navigator.closeSplashscreen();
				}, 600);
				//检查 "登录状态/锁屏状态" 结束
				
			})
			
		</script>

	</body>

</html>